<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>登陆界面</title>
	<link rel="stylesheet" type="text/css" href="../semantic/css/semantic.min.css"> 
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="Login">
	<div class="content">
		<div class="login">
			<div class="title">Website Login</div>
			<div class="form">
				<div class="item">
					<span><i class="user icon"></i></span>
					<input type="text" name="username" placeholder="请输入用户名" />
				</div>
				<div class="item">
					<span><i class="unlock alternate icon"></i></span>
					<input type="password" name="username" placeholder="请输入密码" />
				</div>
				<div class="item">
					<span onclick="remember(event)"><i class="active toggle on icon"></i></span>
					<p class="text">记住账号</p>
				</div>
				<div class="item">
					<input type="button" name="login" value="登陆" />
					<input type="button" name="register" value="注册" />
				</div>
			</div class="form">
			<div class="menu">
				<fieldset>
					<legend>文本内容</legend>
				</fieldset>
				<div class="item" style="background: #009f5d">
					<i class="wechat icon"></i>
				</div>
				<div class="item" style="background: #ff1244">
					<i class="weibo icon"></i>
				</div>
				<div class="item" style="background: #ff8345">
					<i class="qq icon"></i>
				</div>
				<div class="item" style="background: #019fde">
					<i class="facebook icon"></i>
				</div>
			</div>
		</div>	
	</div>
</div>
<div id="register">
	<div class="content">
		<div class="register">
			<div class="title">Website Register</div>
			<div class="form">
				<div class="item">
					<span><i class="user icon"></i></span>
					<input type="text" name="username" placeholder="请输入用户名" />
				</div>
				<div class="item">
					<span><i class="unlock alternate icon"></i></span>
					<input type="password" name="username" placeholder="请输入密码" />
				</div>
				<div class="item">
					<span><i class="unlock alternate icon"></i></span>
					<input type="password" name="username" placeholder="请再次输入密码" />
				</div>
				<div class="item vcode">
					<span class="vcode"></span>
					<input type="text" name="vcode" placeholder="请输入验证码"/>
					<input type="button" name="subvcode" value="发送验证码" />
				</div>
				<div class="item">
					<input type="button" name="register" value="注册" />
					<input type="button" name="login" value="返回登陆" />
				</div>
			</div class="form">
			<div class="menu">
				<fieldset>
					<legend>文本内容</legend>
				</fieldset>
				<div class="item" style="background: #009f5d">
					<i class="wechat icon"></i>
				</div>
				<div class="item" style="background: #ff1244">
					<i class="weibo icon"></i>
				</div>
				<div class="item" style="background: #ff8345">
					<i class="qq icon"></i>
				</div>
				<div class="item" style="background: #019fde">
					<i class="facebook icon"></i>
				</div>
			</div>
		</div>	
	</div>
</div>
</body>
<script type="text/javascript">
	var count = false;
	function remember(e) {
		e = e || window.event;
		if(e.target.classList.contains('on')) {
			e.target.classList.remove('on');
			e.target.classList.remove('active');
			e.target.classList.add('off');
		}else {
			e.target.classList.remove('off');
			e.target.classList.add('on');
			e.target.classList.add('active');
		}
	};

	function btnClick (first,second) {
		return document.querySelector(first).querySelector(second);
	};

	btnClick('#Login','input[name=login]').addEventListener('click',function(event) {
		alert("登陆成功！！！");
	});

	btnClick('#Login','input[name=register]').addEventListener('click',function(event) {
		document.querySelector('#Login').style.height = 0 + 'px';
		document.querySelector('#Login').querySelector('.login').style.height = 0 + 'px';
		document.querySelector('#Login').querySelector('.login').style.padding = 0 + 'px';
	});

	btnClick('#register','input[name=register]').addEventListener('click',function(event) {
		alert("注册成功！！！");
	});

	btnClick('#register','input[name=login]').addEventListener('click',function(event) {
		document.querySelector('#Login').style.height = 100 + '%';
		count = true;

	});

	btnClick('#register','input[name=subvcode]').addEventListener('click',function(event) {
		var i = 60;
		var time = setInterval(function(){
			event.target.defaultValue = i+"s后重新发送";
			i--;
			if(i == 0){
				clearInterval(time);
				event.target.defaultValue = "重新发送";
			}
		},1000);
	});


	document.querySelector('#Login').addEventListener('transitionend',function(){
		if(count) {
			document.querySelector('#Login').querySelector('.login').removeAttribute('style');
			count = false;
		}	
	});
</script>
</html>